<template>
  <div class="app-container">
    <el-form :inline="true" :model="ProRessultVoQuery" class="demo-form-inline">
      <el-form-item label="学生姓名">
        <el-input
          v-model="ProRessultVoQuery.name"
          placeholder="学生姓名"
        ></el-input>
      </el-form-item>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-form-item label="部门">
        <el-select v-model="ProRessultVoQuery.sector" placeholder="请选择">
          <el-option
            v-for="sector in sectorList"
            :key="sector.sectorid"
            :label="sector.sector"
            :value="sector.sectorid"
          />
        </el-select>
      </el-form-item>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-form-item label="职位">
        <el-select v-model="ProRessultVoQuery.post" placeholder="请选择">
          <el-option
            v-for="post in postList"
            :key="post.postid"
            :label="post.post"
            :value="post.postid"
          />
        </el-select>
      </el-form-item>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-form-item>
        <el-button type="primary" @click="reseDdta">重置</el-button>
      </el-form-item>
      <br />
      <!-- 添加弹窗 -->
      <el-button type="primary" @click="addHrVisible"
        ><i class="el-icon-circle-plus-outline"></i>添加员工</el-button
      >
      <el-button class="small" type="warning" @click="removeBatch()"
        >批量删除</el-button
      >
      <br />
      <div>
        <br />

        <p
          style="
            margin: 1;
            background-color: #e6f7ff;
            width: auto;
            height: 30px;
            padding-top: 10px;
          "
        >
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前员工:&nbsp;&nbsp;&nbsp;{{
            this.total
          }}&nbsp;人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本月入职:&nbsp;&nbsp;&nbsp;{{
            this.count
          }}&nbsp;人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本月离职:&nbsp;&nbsp;&nbsp;{{
            this.count1
          }}&nbsp;人
        </p>
      </div>
    </el-form>
    <div>
      <el-table
        :data="list"
        border
        style="width: 100%"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        row-key="id"
      >
        <el-table-column
          type="selection"
          width="55"
          :reserve-selection="true"
        ></el-table-column>
        <el-table-column fixed label="序号" width="70" align="center">
          <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column prop="name" label="姓名" width="100" align="center">
          <template slot-scope="scope">
            <router-link type="primary" v-bind:to="'/hr/eait/' + scope.row.id">
              <el-link type="primary">{{ scope.row.name }}</el-link>
            </router-link>
          </template>
        </el-table-column>

        <el-table-column prop="id" label="工号" width="100" align="center">
        </el-table-column>
        <el-table-column
          prop="gmtBoard"
          label="入职时间"
          width="151"
          align="center"
          type="date"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd "
          format="yyyy-MM-dd"
        >
        </el-table-column>
        <el-table-column prop="post" label="职位" width="180" align="center">
        </el-table-column>
        <el-table-column prop="grades" label="职级" width="100" align="center">
        </el-table-column>
        <el-table-column prop="sector" label="部门" width="160" align="center">
        </el-table-column>
        <el-table-column
          prop="organization"
          label="组织"
          width="120"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="gmtModified"
          label="最新跟进日期"
          sortable
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link type="primary">
              <el-button type="text" @click="handleDown1(scope.row.id)"
                >导出PDF
              </el-button></el-link
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页查询 -->
    <el-pagination
      background
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-aling: center; float: right"
      layout="total,prev,pager,next,jumper"
      @current-change="getList"
    />
    <div id="demo">
      <el-descriptions class="margin-top" title="基本信息" :column="2" border>
        <el-descriptions-item>
          <template slot="label"> <i class="el-icon-user"></i>姓名 </template>
          {{ form1.name }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            性别
          </template>
          <el-select v-model="form1.sex" clearable placeholder="请选择">
            <el-option :value="0" label="女" />
            <el-option :value="1" label="男" />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            身份证
          </template>
          {{ form1.cardId }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            户籍地址
          </template>
          {{ form1.address }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            现居住地
          </template>
          {{ form1.residence }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            手机号
          </template>
          {{ form1.number }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            邮箱地址
          </template>
          {{ form1.email }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            紧急联系人
          </template>
          {{ form1.nameIs }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            紧急联系电话
          </template>
          {{ form1.numberIs }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            工资卡
          </template>
          {{ form1.playCard }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            支付宝账号
          </template>
          {{ form1.zhifubao }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> </template>
        </el-descriptions-item>
      </el-descriptions>
      <br />
      <br />

      <el-descriptions class="margin-top" title="工作信息" :column="2" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            工号
          </template>
          {{ form1.id }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            入职日期
          </template>
          {{ form1.gmtBoard }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            转正日期
          </template>
          {{ form1.gmtPositive }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            组织
          </template>
          {{ form1.organization }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            部门
          </template>
          {{ form1.sector }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            职位
          </template>
          {{ form1.post }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            职级
          </template>
          {{ form1.grades }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> </template>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div>
      <el-dialog
        title="添加员工"
        :visible.sync="dialogFormVisible"
        :before-close="handleClose"
      >
        <p style="font-size: 18px"><b>|&nbsp;&nbsp;基本信息</b></p>
        <el-form :model="form" :inline="true">
          <el-form-item label="*姓名" :label-width="formLabelWidth">
            <el-input
              v-model="form.name"
              placeholder="请输入"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="*手机号码" :label-width="formLabelWidth">
            <el-input
              v-model="form.number"
              placeholder="请输入"
              autocomplete="off"
              maxlength="11"
              show-word-limit
              oninput="/^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/"
            ></el-input>
          </el-form-item>
          <el-form-item label="*邮箱地址" :label-width="formLabelWidth">
            <el-input
              v-model="form.email"
              placeholder="请输入"
              autocomplete="off"
              oninput="/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/"
            ></el-input>
          </el-form-item>

          <p style="font-size: 18px"><b>|&nbsp;&nbsp;工作信息</b></p>
          <el-form-item label="*工号" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入"
              show-word-limit
              maxlength="6"
              v-model="form.id"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="*员工类型" :label-width="formLabelWidth">
            <el-select v-model="form.gradesid" placeholder="请选择">
              <el-option
                v-for="grades in gradesList"
                :key="grades.gradesid"
                :label="grades.grades"
                :value="grades.gradesid"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="*入职日期" :label-width="formLabelWidth">
            <el-date-picker
              v-model="form.gmtBoard"
              type="datetime"
              placeholder="请选择"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd"
              :picker-options="pickerOptions01"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item
            label="*所属组织"
            :label-width="formLabelWidth"
            style="margin-left: -30px"
          >
            <el-select
              v-model="form.organizationid"
              placeholder="请选择"
              @change="myGetOrgInfo"
            >
              <el-option
                v-for="organization in organizationList"
                :key="organization.organizationid"
                :label="organization.organization"
                :value="organization.organizationid"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="*所属部门" :label-width="formLabelWidth">
            <el-select
              v-model="form.branchid"
              placeholder="请选择"
              @change="myGetBranInfo"
            >
              <el-option
                v-for="sector in branList"
                :key="sector.sectorid"
                :label="sector.sector"
                :value="sector.sectorid"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="*所属子部门"
            :label-width="formLabelWidth"
            style="margin-left: -10px"
          >
            <el-select
              v-model="form.sectorid"
              placeholder="请选择"
              @change="myGetPositionInfo"
            >
              <el-option
                v-for="sector in sectorList"
                :key="sector.sectorid"
                :label="sector.sector"
                :value="sector.sectorid"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="*职位" :label-width="formLabelWidth">
            <el-select v-model="form.postid" placeholder="请选择">
              <el-option
                v-for="post in postList2"
                :key="post.postid"
                :label="post.post"
                :value="post.postid"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="富文本">
            <editor-bar v-model="form.rtf" ref="editor"></editor-bar>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addHr">确定添加</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>


<script >
import orgApi from "@/api/hr/organization";
import profilesApi from "@/api/hr/profiles";
import sectorApi from "@/api/hr/sector";
import positionApi from "@/api/hr/position";
import gradesApi from "@/api/hr/grades";
import Tinymce from "@/components/Tinymce";
import htmlToPdf from "@/utils/htmlToPdf";
import EditorBar from "@/components/Editor/WangEditor";
export default {
  components: { Tinymce },
  components: { EditorBar },
  data() {
    return {
      tableData: [],
      keywords: "",
      msg: "", //记录每一条的信息，便于取id
      multipleSelection: [], //多选的数据
      currentPage: 1,
      pagesize: 10,

      pickerOptions01: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e7;
        },
      },

      formLabelWidth: "120px",
      list: [],
      page: 1,
      limit: 5,
      total: 0,
      count: "",
      count1: "",

      dialogFormVisible: false,
      // 添加数据
      form: {
        id: "",
        gradesid: "",
        gmtBoard: "",
        postid: "",
        sectorid: "",
        name: "",
        number: "",
        email: "",
        grades: "",
        rtf: "",
        sectorId: "",
        organizationid: "",
        parentId: "",
        branchid: "",
      },

      //模糊查询
      ProRessultVoQuery: {
        name: "",
        sector: "",
        post: "",
        organization: "",
      },
      //下拉
      organizationList: [],
      postList: [],
      postList2: [],
      sectorList: [],
      gradesList: [],
      branList: [],
      dialogFormVisible: false,

      /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e7;
        },
      },
      oneform: {
        name: "",
      },
      form1: {
        name: "",
        sex: "",
        cardId: "",
        address: "",
        residence: "",
        number: "",
        email: "",
        nameIs: "",
        numberIs: "",
        playCard: "",
        zhifubao: "",
        //工作信息
        id: "",
        gmtBoard: "",
        gmtPositive: "",
        organization: "",
        post: "",
        postid: "",
        grades: "",
        sector: "",
        gmtDeparture: "",
        gradesid: "",
      },
      dialogFormVisible: false,
      activeName: "first",
    };
  },
  created() {
    //页面渲染之前执行，一般调用method里面定义的方法
    this.getList();
    this.getSeclist();
    this.getPoslist();
    this.getGralist();
    this.getOrglist();
    this.countFalse();
    this.countPro();
  },

  methods: {
    addHrVisible() {
      this.dialogFormVisible = true;

      console.log(JSON.stringify(this.form, null, 2));
    },

    // 获取富文本内容
    getEditor(value) {
      this.content = value;
    },

    async handleDown1(id) {
      await profilesApi.getByid(id).then((response) => {
        this.form1 = response.data.proRessultVoList[0];
      });
      this.handleDown(this.form1.name);
    },
    handleDown(value) {
      //导出PDF
      htmlToPdf.downloadPDF(document.querySelector("#demo"), value);
    },
    //批量删除
    handleSelectionChange(val) {
      this.multipleSelection = [];

      this.multipleSelection = val;
    },
    removeBatch() {
      this.$confirm("此操作将批量删除员工, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          for (let i = 0; i < this.multipleSelection.length; i++) {
            let id = this.multipleSelection[i].id;
            profilesApi.removeById(id).then((res) => {
              if (i == this.multipleSelection.length - 1) {
                this.$message({
                  message: "恭喜你，删除成功",
                  type: "success",
                });
                this.multipleSelection = [];
                this.onSubmit();
                this.getList();
              }
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
      console.log(JSON.stringify(this.form, null, 2));
      this.form = {};
    },
    //在职
    countFalse() {
      profilesApi.countFalse().then((response) => {
        this.count = response.data.countFalse;
      });
    },
    //离职
    countPro() {
      profilesApi.countPro().then((response) => {
        this.count1 = response.data.count;
      });
    },

    onSubmit() {
      profilesApi
        .condition(1, this.limit, this.ProRessultVoQuery)
        .then((res) => {
          this.page = 1;
          this.list = res.data.rows;
          this.total = res.data.total;
        });
    },

    //添加信息
    addHr() {
      profilesApi.getProId(this.form.id).then((response) => {
        if (response.data.flag == true) {
          this.$message({
            message: "已有该工号！",
            type: "warning",
          });
          return;
        }

        var regEmail =
          /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
        if (this.form.number == "") {
          alert("请输入手机号");
          return;
        } else if (!reg.test(this.form.number)) {
          alert("手机号码格式不正确");
          return;
        } else if (this.form.email == "") {
          alert("请输入邮箱");
          return;
        } else if (!regEmail.test(this.form.email)) {
          alert("邮箱格式不正确");
          return;
        } else if (this.form.name == "" || this.form.name == null) {
          alert("请输入姓名");
          return;
        } else if (this.form.gradesid == "" || this.form.gradesid == null) {
          alert("员工类型不能为空");
          return;
        } else if (this.form.gmtBoard == "" || this.form.gmtBoard == null) {
          alert("入职时间不能为空");
          return;
        } else if (this.form.postid == "" || this.form.postid == null) {
          alert("职位不能为空");
          return;
        } else if (this.form.sectorid == "" || this.form.sectorid == null) {
          alert("部门不能为空");
          return;
        } else if (this.form.id == "" || this.form.id == null) {
          alert("工号不能为空");
          return;
        } else {
          profilesApi.addHr(this.form).then((res) => {
            if (res.success) {
              this.$message({
                message: "恭喜你，添加成功",
                type: "success",
              });

              console.log(JSON.stringify(this.form, null, 2));
              this.form = {};
              console.log(JSON.stringify(this.form, null, 2));
              this.dialogFormVisible = false;
              this.ProRessultVoQuery = {};
              this.countPro();
              this.countFalse();
              this.getList();
              console.log(JSON.stringify(this.form, null, 2));
            } else {
              this.$message.error();
              // ("添加失败");
            }
          });
        }
      });
    },
    //职级类型
    getGralist() {
      gradesApi.getGralist().then((response) => {
        this.gradesList = response.data.item;
      });
    },
    //获取组织列表
    getOrglist() {
      orgApi.getOrglist().then((response) => {
        this.organizationList = response.data.organizationList;
      });
    },

    //获取子部门列表
    getSeclist() {
      sectorApi.getSeclist().then((response) => {
        this.sectorList = response.data.sectorList;
      });
    },

    //获取职位列表
    getPoslist() {
      positionApi.getPoslist().then((response) => {
        this.postList = response.data.positionList;
      });
    },

    myGetOrgInfo(parentId) {
      sectorApi.getBranInfo(parentId).then((response) => {
        this.branList = response.data.branLists;
        this.form.branchid = response.data.branLists[0].id;
        this.myGetBranInfo(response.data.branLists[0].id);
      });
    },

    myGetBranInfo(parentId) {
      sectorApi.getBranSonInfo(parentId).then((response) => {
        this.sectorList = response.data.branSonLists;
        this.form.sectorid = response.data.branSonLists[0].id;
        this.myGetPositionInfo(response.data.branSonLists[0].id);
      });
    },
    myGetPositionInfo(sectorId) {
      positionApi.getPositionInfo(sectorId).then((response) => {
        this.postList2 = response.data.items;

        if (this.postList2.length == 0) {
          this.form.postid = "";
        } else {
          this.form.postid = this.postList2[0].postid;
        }
      });
    },
    // myGetPositionInfo(sectorId) {
    //   positionApi.getPositionInfo(sectorId).then((response) => {
    //     this.postList2 = response.data.items;

    //     if (this.postList2.length == 0) {
    //       this.form.postid = "";
    //     } else {
    //       this.form.postid = this.postList2[0].postid;
    //     }
    //   });
    // },
    //  myGetPositionInfo(parentId) {
    //       sectorApi.getBranSonInfo(parentId).then((response) => {
    //         this.postList2 = response.data.items;

    //         if (this.postList2.length == 0) {
    //           this.form.postid = "";
    //         } else {
    //           this.form.postid = this.postList2[0].postid;
    //         }
    //       });
    //     },
    getList(page = 1) {
      this.page = page;
      profilesApi
        .getProListPage(this.page, this.limit, this.ProRessultVoQuery)
        .then((response) => {
          //成功
          //response接口返回数据

          this.list = response.data.rows;
          this.total = response.data.total;
        })
        .catch((error) => {
          console.log(error);
        }); //失败
    },
    reseDdta() {
      this.ProRessultVoQuery = {};
      this.getList();
      this.countFalse();
      this.countPro();
    },

    //根据部门id获取职位
    getPost(id) {
      positionApi.getPositionInfo(id).then((response) => {
        this.postList2 = response.data.items;
      });
    },

    getByid() {
      const id = this.$route.params.id;
      profilesApi.getByid(id).then((response) => {
        this.form1 = response.data.proRessultVoList[0];
        this.getPost(this.form1.sectorid);
      });
    },
  },
};
</script>
<style scoped>
.editor {
  width: 500%;

  position: relative;

  z-index: 0;
}

.toolbar {
  border: 1px solid #ccc;
}
.text {
  border: 1px solid #ccc;

  min-height: 500px;
}

input.el-input__inner {
  border: 1px solid #dcdfe6;
}
div #demo {
  position: absolute;
  left: -3000px;
  background-color: #fff;
  width: 100%;
  /* height: 400px; */
  /* width: 1360px; */
  margin-top: 50px;
  margin: auto;
  padding: 20px;
  box-sizing: border-box;
  color: #000;
  font-family: "Microsoft YaHei";
  /* display: none; */
}
</style>